import { Col, Row, Statistic } from 'antd';
import React from 'react';
import _ from 'lodash';

const textAlign = 'right';

export const DIVISOR_MONEY = 10000;
export const DIVISOR_PCT = 100;
export const FIXED_MONEY = 4;
export const FIXED_NUMBER = 2;
export const FIXED_AREA = 2;
export const FIXED_PCT = 2;
export function RenderNumber({ value, precision, suffix }) {
  let valNum = 0;
  let fixed = 0;
  if (value && !_.isNaN(_.toNumber(value))) {
    valNum = _.toNumber(value);
  }
  if (precision && !_.isNaN(_.toNumber(precision))) {
    fixed = precision;
    valNum = valNum.toFixed(fixed);
  }
  return (
    <Statistic
      value={valNum}
      precision={fixed}
      valueStyle={{ color: '#000000A6' }}
      suffix={suffix}
    />
  );
}

export function RenderNumberPct({ value, precision, suffix }) {
  let valNum = 0;
  let fixed = 0;
  let color = '#000000A6';
  let prefix = '';
  if (value && !_.isNaN(_.toNumber(value))) {
    valNum = _.toNumber(value);
  }
  if (precision && !_.isNaN(_.toNumber(precision))) {
    fixed = precision;
    valNum = valNum.toFixed(precision);
  }
  if (valNum > 0) {
    color = 'rgba(67, 207, 124, 1)';
    prefix = '+';
  }
  if (valNum < 0) {
    color = 'rgba(255, 0, 25, 1)';
    prefix = '-';
  }

  return (
    <Statistic
      value={Math.abs(_.toNumber(valNum))}
      precision={fixed}
      valueStyle={{ color }}
      prefix={prefix}
      suffix={suffix}
    />
  );
}
